<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>BDO System Library</title>
<meta name="description" content="">
<meta name="keywords" content="">

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300,400,700|Alike" rel="stylesheet">

<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- favicon.ico and apple-touch-icon.png -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57-iphone.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72-ipad.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114-iphone4.png">

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="screen.css">
<!-- custom CSS -->
<link rel="stylesheet" href="custom.css">

<!-- main JS libs  -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
<script src="js/libs/respond.min.js"></script>					 
<script src="js/libs/jquery.min.js"></script>

<!-- scripts  -->
<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/general.js"></script>
<script src="js/hoverIntent.js"></script>
<!-- carousel -->
<script src="js/jquery.carouFredSel.min.js"></script>
<script src="js/jquery.touchwipe.js"></script>
<!-- sliders -->
<script src="js/slides.min.jquery.js"></script>
  
</head>
<body>  
<div class="body_wrap">

<div class="header_container">
	
	<header>
    	<div class="container">	        
	        
	        <div class="header_right">            	
				<label>User Login</label>
                <input type="text" style="padding:2px" Placeholder="NIK" />
				<input type="password" style="padding:2px" Placeholder="Password" />
				<input type="submit" value="Login" />
	        </div>
			
			<div class="header_left">
			   	<div class="logo">
	            <a href="index.html"><img src="images/logo.png" alt=""></a>
	            <strong>BDO Internal System</strong>
	            </div>
	        </div>
            
	        <div class="clear"></div>	
        </div>                    		    
	</header>
</div>
<!--/ header_container -->

<div class="container topm_cont">    
 
    <!-- topmenu -->    
    <nav id="topmenu">            
	    <ul class="dropdown">              
			<li class="menu-level-0 current-menu-ancestor"><a href="index.html"><span>Home</span></a></li>	
			<li class="menu-level-0 current-menu-ancestor"><a href="news.html"><span>News</span></a></li>	
			<li class="menu-level-0 current-menu-ancestor"><a href="about.html"><span>About Us</span></a></li>
			<li class="menu-level-0 current-menu-ancestor"><a href="training.html"><span>Training</span></a></li>
            <li class="menu-level-0 current-menu-ancestor"><a href="timesheet.html"><span>Timesheet</span></a></li>
			<li class="menu-level-0 current-menu-ancestor"><a href="career.html"><span>Career</span></a></li>
			<li class="menu-level-0 current-menu-ancestor"><a href="it-sys.html"><span>IT System</span></a></li>
			<li class="menu-level-0 current-menu-ancestor"><a href="hr-sys.html"><span>HR System</span></a></li>
			<li class="menu-level-0 current-menu-ancestor  active"><a href="library.html"><span>Library</span></a></li>
			<li class="menu-level-0 current-menu-ancestor"><a href="contact.html"><span>Contact Us</span></a></li>
	    </ul>	   
		<div class="clear"></div>                             
	</nav>    
    <!--/ topmenu -->
    
    <div class="topbar">
    	<div class="top_share"><span class="social_title">SHARE</span> <a href="#" class="social_google">Google +1</a> <a href="#" class="social_fb">Facebook</a> <a href="#" class="social_twitter">Twitter</a> <a href="#" class="social_pinterest">Pinterest</a></div>
        
    	<span class="top_filter"><a href="#" class="link_mostcomm">Most commented</a> <a href="#" class="link_pick">Editor’s Picks</a> <a href="#" class="link_mostlike">Most liked</a> <a href="#" class="link_random">Random story</a></span>     
        <div class="clear"></div>
    </div>
</div>

<!-- top Slider -->
<div class="topSlider">
	<div class="container">
    
		<ul id="topcarousel" class="ts_container">			
            
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_2.jpg" width="233" height="300" alt=""></a>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">Tudor personal Tailor</a>
                </div> 
            </li>
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_3.jpg" width="233" height="300" alt=""></a>
                <span class="icon_video"></span>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">Makeup Collection Spring 2012</a>
                </div> 
            </li>            
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_4.jpg" width="233" height="300" alt=""></a>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">The Good Wife</a>
                </div> 
            </li>     
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_5.jpg" width="233" height="300" alt=""></a>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">Hell on wheels</a>
                </div> 
            </li>
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_6.jpg" width="233" height="300" alt=""></a>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">The Walking dead</a>
                </div>
            </li>  
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_2.jpg" width="233" height="300" alt=""></a>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">Tudor personal Tailor</a>
                </div> 
            </li>             
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_3.jpg" width="233" height="300" alt=""></a>
                <span class="icon_video"></span>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">Makeup Collection Spring 2012</a>
                </div> 
            </li>            
            <li class="slide_1_4">
            	<a href="#"><img src="images/temp/top_slide_4.jpg" width="233" height="300" alt=""></a>
                <div class="slide_caption">
                	<div class="slide_tag">Movies</div>
                    <a href="#">The Good Wife</a>
                </div> 
            </li>            

        </ul>
        <div class="clear"></div>
        <div class="ts_pagination" id="topcarousel_pag"></div>
	</div>
</div>
<script>
	jQuery(document).ready(function($) {
		$('#topcarousel').carouFredSel({
			pagination : "#topcarousel_pag",
			auto: {
				pauseDuration: 7000,
				pauseOnHover: true
			},
			scroll: {
				wipe: true
			}
		});
	});
</script>
<!--/ top Slider -->
    
<div class="container"> 
<!-- middle -->
<div id="middle" class="full_width">
	
    <div class="content" role="main">
    
    	<article class="post-detail">            
			<div class="entry">
            
			<div class="col col_1">
            <!-- carousel with posts -->
            <div class="post_carousel">
            	<ul id="postCarousel1">
                	<li>
                    	<a href="post-details.html"><img src="images/temp/post_4_1.jpg" width="100" height="200" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Gosip</div><a href="post-details.html">Dolce & Gabbana celebrated 20 years in menswear in 2010</a>
		                </div>
                        <a href="post-details.html" class="zoom"></a>
                    </li>
					<li>
                    	<a href="post-details.html"><img src="images/temp/post_4_1.jpg" width="100" height="200" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Gosip</div><a href="post-details.html">Dolce & Gabbana celebrated 20 years in menswear in 2010</a>
		                </div>
                        <a href="post-details.html" class="zoom"></a>
                    </li>
					<li>
                    	<a href="post-details.html"><img src="images/temp/post_4_1.jpg" width="100" height="200" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Gosip</div><a href="post-details.html">Dolce & Gabbana celebrated 20 years in menswear in 2010</a>
		                </div>
                        <a href="post-details.html" class="zoom"></a>
                    </li>
					<li>
                    	<a href="post-details.html"><img src="images/temp/post_4_1.jpg" width="100" height="200" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Gosip</div><a href="post-details.html">Dolce & Gabbana celebrated 20 years in menswear in 2010</a>
		                </div>
                        <a href="post-details.html" class="zoom"></a>
                    </li>
                    <li>
                    	<a href="post-details.html"><img src="images/temp/post_4_2.jpg" width="221" height="140" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Technology</div><a href="post-details.html">Fake 'Canabalt' clone for iPhone and iPad in iTunes App Store</a>
		                </div> 
                        <a href="post-details.html" class="zoom"></a>
                    </li>
                    <li>
                    	<a href="post-details.html"><img src="images/temp/post_4_3.jpg" width="221" height="140" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Technology</div>
		                    <a href="post-details.html">Hands-on: app lets you Bump smartphone pics to your computer</a>
		                </div> 
                        <a href="post-details.html" class="zoom"></a>
                    </li>
                    <li>
                    	<a href="post-details.html"><img src="images/temp/post_4_4.jpg" width="221" height="140" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Education</div>
		                    <a href="post-details.html">Revisiting why incompetents think they're awesome</a>
		                </div> 
                        <a href="post-details.html" class="zoom"></a>
                    </li>
                    <li>
                    	<a href="post-details.html"><img src="images/temp/post_4_5.jpg" width="221" height="140" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Sport</div>
		                    <a href="post-details.html">ThinkPad Tablet Android 4.0 update rolling out in some regions</a>
		                </div> 
                        <a href="post-details.html" class="zoom"></a>
                    </li>
                    <li>
                    	<a href="post-details.html"><img src="images/temp/post_4_6.jpg" width="221" height="140" alt=""></a>
		                <div class="slide_caption">
		                	<div class="slide_tag">Fashion</div>
		                    <a href="post-details.html">Film company Gaumont says Hadopi eradicated illegal downloads of French films</a>
		                </div> 
                        <a href="post-details.html" class="zoom"></a>
                    </li>
                </ul>
                <div class="clear"></div>
                <a class="prev" id="postCarousel1_prev" href="#"><span>prev</span></a>
                <a class="next" id="postCarousel1_next" href="#"><span>next</span></a>
            </div>
            <script>
						jQuery(document).ready(function($) {
							$('#postCarousel1').carouFredSel({
								next : "#postCarousel1_next",
								prev : "#postCarousel1_prev",
								width: '100%',
								auto: false,
								circular: false,
							    infinite: true,
								scroll: 1						
							});
						});
			</script>
            <!--/ carousel with posts -->
			</div>
            
            
                 
            <div class="clear"></div>
            </div>
		</article>
	</div>
    <!--/ content -->    	
</div>
<!--/ middle --> 
</div>
<!--/ container --> 


<div class="container"> 
<!-- middle -->
<div id="middle" class="cols2">
	
    <div class="title">
    	<h1><span>Shortcodes:</span> Columns</h1>
    </div>  
    
    <div class="content" role="main">

		<script>
	    SyntaxHighlighter.defaults['gutter'] = false;
	    SyntaxHighlighter.defaults['toolbar'] = true;
	    SyntaxHighlighter.all();
		</script>
                
    	<article class="post-detail post-page">            
			<div class="entry">
            
                <div class="row">
                    <div class="col col_1_4 ">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>
                    
                    <div class="col col_1_4">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>
                    
                    <div class="col col_1_4">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>
                    
                    <div class="col col_1_4">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>

                </div>
                
                <div class="clear"></div>
				
				<div class="row">
                    <div class="col col_1_4 ">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>
                    
                    <div class="col col_1_4">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>
                    
                    <div class="col col_1_4">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>
                    
                    <div class="col col_1_4">
						<div class="inner">
							<h5>Programming Ebook</h5>
							<img src="images/temp/post_4_4.jpg" width="120" height="140" alt="">
							<p class="ebook_p">Mutley, you snickering, floppy eared hound. When courage is needed, you&#8217;re never around.</p>
						</div>
                    </div>

                </div>
                
                <div class="clear"></div>
                
  			<div class="clear"></div>            
            </div>               
        </article>
        
       
        
	</div>
    <!--/ content -->
    
    <!-- sidebar -->
    <div class="sidebar">

		<div class="widget-container widget_nav_menu">
        	<img src="images/icons/icons_16_menu.png" alt="" class="widget_icon">
           		<h3 class="widget-title">BOOK CATEGORIES</h3>
                    <ul>                       		
                            <li><a href="shortcodes-buttons.html"><span>Buttons & Lists</span></a></li> 
                            <li><a href="shortcodes-text.html"><span>Text & Images</span></a></li>
                            <li><a href="shortcodes-charts.html"><span>Charts</span></a></li>  
                            <li class="current-menu-item"><a href="shortcodes-columns.html"><span>Columns</span></a>
                            	<ul>
									<li><a href="shortcodes-columns-full.html"><span>Full width page</span></a></li>  
									<li><a href="shortcodes-columns-full2.html"><span>Full width with Gallery</span></a></li>  
								</ul>
                            </li>  
                            <li><a href="shortcodes-lightbox.html"><span>Lightbox</span></a></li>
                            <li><a href="shortcodes-media.html"><span>Videos & Galleries</span></a></li>
                            <li><a href="shortcodes-maps.html"><span>Google Maps</span></a></li>
                            <li><a href="shortcodes-tabs.html"><span>Tabs and Toggles</span></a></li>
                            <li><a href="shortcodes-tables.html"><span>Boxes & Tables</span></a></li>                            
                            <li><a href="shortcodes-typography.html"><span>Typography</span></a></li>
                            <li><a href="shortcodes-widgets.html"><span>Widgets</span></a></li>
                    </ul>
		</div> 
                    
    </div>
    <!--/ sidebar -->
     
    
        	
</div>
<!--/ middle --> 
</div>
<!--/ container -->

<footer>
<div class="container">

    <div class="footer_right">
    	<ul class="botmenu">
        	<li><a href="about.html">ABOUT</a></li>
            <li><a href="#">AUTHORS</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="advertise.html">ADVERTISE</a></li>
            <li><a href="#">PRIVACY</a></li>
            <li><a href="#">TERMS</a></li>
        </ul>
    </div>
    
    <div class="footer_left">
   		<img src="images/logo_footer.png" width="230" height="50" alt="">
    </div>
	
    <div class="clear"></div>
    
</div>
</footer>

</div>
</body>
</html>